<template>
  <div class="addMonthCarBgc">
    <!-- 导航栏 -->
    <div class="addMonthCard">
      <div class="addMonthCardCenter">
        <el-page-header @back="goBack">
          <template v-slot:content>
            <!-- 在这里定义您想要显示的内容 -->
            <span>查看详情</span>
          </template>
        </el-page-header>
      </div>
      <div class="addMonthCardCenter1">黑马程序员</div>
    </div>
    <div class="vehicle">
      <!-- 车辆信息 -->
      <el-form ref="formDate" label-width="100px" class="demo-ruleForm">

        <el-card class="box-card" style="width:80vw">
          <div slot="header" class="clearfix">
            <span>车辆信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="车主姓名" prop="personName">
              <span>{{ infoList.personName }}</span>
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="联系方式" prop="phoneNumber">
                <span>{{ infoList.phoneNumber }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="车牌号码" prop="carNumber">
              <span>{{ infoList.carNumber }}</span>
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="车辆品牌" prop="carBrand">
                <span>{{ infoList.carBrand }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 最近一次月卡缴费信息 -->
        <el-card class="MonthCard">
          <div slot="header" class="clearfix">
            <span>月卡缴费记录</span>
          </div>
          <el-table
            :data="rechargeList"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="90"
            >1</el-table-column>
            <el-table-column
              label="有效时间"
              width="200"
            ><template v-slot="{row}">
              {{ row.cardStartDate }}至{{ row.cardEndDate }}</template>
              </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="支付金额"
            />
            <el-table-column
              prop="paymentMethod"
              label="支付方式"
            ><template v-slot="{ row }">
              <span v-if="row.paymentMethod === 'Alipay'">支付宝</span>
              <span v-else-if="row.paymentMethod === 'Cash'">现金支付</span>
              <span v-else-if="row.paymentMethod === 'WeChat'">微信</span>
            </template></el-table-column>
            <el-table-column
              prop="createTime"
              width="300"
              label="办理时间"
            />
            <el-table-column
              prop="createUser"
              label="办理人"
            />
          </el-table>
        </el-card>
      </el-form>
    </div>

  </div>
</template>

<script>
import { getParkingCard } from '@/api/TrafficManagement/monthCar'
export default {
  name: 'ViewMonthCard',
  data() {
    return {
      infoList: [{
        personName: '',
        phoneNumber: '',
        carNumber: '',
        carBrand: '',
        carInfoId: ''
      }],
      rechargeList: []
    }
  },
  async created() {
    const result = await getParkingCard(this.$route.params.id)
    console.log(result)
    this.rechargeList = result.data.rechargeList
    this.infoList.personName = result.data.personName
    this.infoList.phoneNumber = result.data.phoneNumber
    this.infoList.carNumber = result.data.carNumber
    this.infoList.carBrand = result.data.carBrand
    this.infoList.carInfoId = result.data.carInfoId
  },
  methods: {
    goBack() {
      this.$router.push('/monthCar')
    }
  }
}
</script>

<style  scoped>
.addMonthCarBgc{
  width: 100%;
  height: 100%;
  background-color: #f4f6f8;
}
.addMonthCard{
 width: 100%;
 height: 60px;
 background-color: #fff;
 display: flex;
flex-direction:row;
justify-content:space-between;
 font-size: 18px;
}
.addMonthCardCenter{
  width: 200px;
  height: 70px;
 margin-top: 20px;
 margin-left: 20px;
}
.addMonthCardCenter1{
width: 100px;
height: 70px;
margin-top: 20px;
margin-right: 20px;
}
.vehicle{
  width: 100vw;
  /* margin-left: 140px; */
}
.box-card{
  margin-top: 30px;
   margin: 30px auto;
}
.queding{
  width: 100vw;
  height: 100px;
  background-color: #fff;
  margin-top: 140px;

    text-align: center;
    line-height: 100px;

}
.MonthCard{
    width: 1150px;
    margin: 0 auto;
}

</style>
